<template>
  <div id="square">
    <mt-header fixed title="掌游宝" class="head ">
      <mt-button  style="height: 100%; padding-top: 10%" @click.native="changeSlide" slot="left"><img style="margin-left: 20%"  src="../assets/left.png"></mt-button>
      <mt-button  style="height: 100%; padding-top: 10%; margin-left: 50%;" slot="right"><img  src="../assets/right.png"></mt-button>
    </mt-header>

    <!---->
     <mt-popup v-model="popupVisible" position="left" class="sslide">
      <div class="slideLeft">
          <div class="userName">
            <img class="img-circle" src="../assets/100x100.png" alt="">
            <div class="login" @click="signIn()" v-bind:class="{'isnone':login}">
              登录
            </div>
            <div class="name" v-bind:class="{'isnone':nameStyle}">
              {{name}}
              <div class="signOut" @click="signOut()">
                注销
              </div>
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              下载管理
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              我的评论
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              我的动态
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              私信
            </div>
          </div>
          <div class="cell">
            <img src="../assets/100x100.png" alt="">
            <div class="stitle">
              修改资料
            </div>
          </div>
      </div>
    </mt-popup>

    <!---->


    <span class="title">
        热门话题
    </span>
    <span class="more">
        更多内容 >
    </span>
   
    <div class="topic">
        <div v-for="i in 3" class="topicBox" @click="getTopic(i)">
            #balabala#
        </div>
    </div>
    <div v-for="(i,index) in userSquare" class="userSquare">
        <img class="img-circle avatar" :src="getAvatar(index)">
        <div class="userComment">
            <div class="userName">
                {{i.userName}}
            </div>
            <div class="commentTime">
                {{i.afterTime}}
            </div>
            <div class="commentText">
                {{i.comment}}
            </div>
            <div class="commentImg">
                <img v-for="v in i.img" :src="v" alt="">
            </div>
            <div class="likes">
                <div class="rightMargin">
                   <span @click="like(i)"><img style="width: 10%;margin-top: -1%;margin-right: -1%" src="../assets/like.png"></span> 
                   <span>{{i.likes}} </span>
                   <span @click="cts()"><img style="width: 10%;margin-top:-0.5%" src="../assets/c.png"></span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
        popupVisible:false,
        userSquare:{
            user0:{
                userAvatar:"./src/assets/100x100.png",
                userName:"UH",
                beforeTime:1492659788217,
                afterTime:"",
                comment:"balbalabalabalabalabalbalabalabalabalabalabalbalbalblabl",
                img:[
                    "./src/assets/100x100.png",
                    "./src/assets/100x100.png",
                    "./src/assets/100x100.png",
                    "./src/assets/100x100.png"
                ],
                likes:0
            },
            user1:{
                userAvatar:"./src/assets/100x100.png",
                userName:"UH",
                beforeTime:1492431076434,
                afterTime:"",
                comment:"balbalabalabalabalabalbalabalabalabalabalabalbalbalblabl",
                img:[
                    "./src/assets/100x100.png",
                    "./src/assets/100x100.png",
                    "./src/assets/100x100.png",
                    "./src/assets/100x100.png"
                ],
                likes:0
            },
            
        }
    }
  },
  
  methods: {
    getAvatar(i){
        return this.userSquare[i].userAvatar
        
    },
    getTopic(i){
        console.log(i);
    },
    like(i){
        if(i.likes==0){
            i.likes++;
        }else{
            i.likes--;
        }
    },
    cts(){
        console.log("cts");
    },
    signOut(){
      var _this = this;
      _this.$http.post('/users/logout').then(function (res) {
        if (res.data.result == 0) {
          console.log('用户未登录')
        } else if (res.data.result == 1) {
          console.log(res.data);
          _this.$store.commit('logout');
        }
      })
    },
    changeSlide(){
      this.popupVisible=!this.popupVisible;
     
    },
    signIn(){
      this.popupVisible=false;
      this.$router.push({path: 'signIn'})
    }
  },
   computed:{
    login(){
      return this.$store.state.login;
    },
    name(){
      return this.$store.state.name;
    },
    nameStyle(){
      return this.$store.state.nameStyle;
    }

  },
  mounted(){
    var getlength=function(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }

    var myDate=new Date()
    var bTime,aTime;
    var length=getlength(this.userSquare);
    console.log(myDate.getTime());
    for(var i=0;i<length;i++){
        bTime=this.userSquare["user"+i].beforeTime;
        aTime=parseInt((myDate.getTime()-bTime)/1000);
        if(aTime/60<1){
            this.userSquare["user"+i].afterTime=aTime+"秒前"
        }else if(aTime/3600<1){
            this.userSquare["user"+i].afterTime=parseInt(aTime/60)+"分钟前"
        }else if(aTime/86400<1){
            this.userSquare["user"+i].afterTime=parseInt(aTime/3600)+"小时前"
        }else{
            this.userSquare["user"+i].afterTime=parseInt(aTime/86400)+"天前"
        }
    }
    
  }
 
}
</script>

<style>
#square{
    padding-top: 14%;


    padding-bottom: 15%;

    background-color: #e5e8eb;
}

 #square .head{
    background-color: #2c46a5;
}
/*顶端热门和更多*/
 #square .title{
    
    position: absolute;
    left:2%;
    font-size:300%;
}
  #square .more{
    position: absolute;
    right:2%;
    font-size:250%;
}

/*热门话题*/
  #square .topic{
    width: 100%;
    margin-top: 8%;
    margin-bottom: 27%;
}
#square .topic .topicBox{
    background-color: #666;
    height: 100%;
    width: 30%;
    float: left;
    margin-left: 2.4%;
    font-size: 350%;
    padding-top:3.5%;
    padding-bottom:3.5%;
    color:#fff;
}

/*评论区*/
#square .userSquare{
    width:100%;
    padding-bottom: 0%;
    border-top:1px blue solid;
    margin-top: 2%;
}
#square .userSquare .avatar{
    width: 10%;
    position: absolute;
    left:4%;
    margin-top:2.5%;
}
#square .userSquare .userComment{
    width: 78%;
    height: 100%;
    margin-left: 17%;
    text-align: left;
    padding-top: 2%;
}
#square .userSquare .userComment .userName{
    color: blue;
    font-size:380%;
}
#square .userSquare .userComment .commentTime{
    margin-top: -1%;
    font-size:200%;
}
#square .userSquare .userComment .commentText{
    width: 100%;
    font-size: 350%;
    word-wrap: break-word;
    line-height: 100%;
}
#square .userSquare .userComment img{
    width: 32%;
    margin-top: 1%;
    margin-right: 2%;
    margin-bottom: 1%; 
}
#square .userSquare .userComment .likes{
    width: 100%;
    text-align: right;
    font-size: 300%;
}
.rightMargin{
    margin-right: 2%;
}
</style>
